import React,{useEffect,useState} from 'react'

const Play = () => {

    const [play,setPlay] = useState([]);

    useEffect(()=>{
        fetch(`https://api.124ss.xyz:2355/endplay?rand=$1`,{
          method: "GET",
          mode: "cors",
          headers: {
            "Content-Type": "text/plain"
          }
    
        }).then(res => {
          return res.json();
        })
        .then(res =>{
            var arr = [];
            var playObj = [];
            res.forEach((item,index) => {
                playObj = [
                    item['play_id'],
                    item['play_image'],
                    item['play_name'],
                    item['play_text']
                ]
                arr.push(playObj)
            } )
            setPlay(arr)
        })
        .catch((err)=>{
          console.log("err:",err);
        })
      },[]
    )

    const DelItem = (idx,item) => {
  
        fetch(`https://api.124ss.xyz:2355/enddelPlay/${item[0]}`,{
          method: "delete",
          mode: "cors",
          headers: {
            "Content-Type": "text/plain"
          },
          body: JSON.stringify({
            play_id: item[0]
          })
    
        }).then(res => {
          return res.text();
        })
        .then(res =>{
          console.log(res)
        } )
        .catch((err)=>{
          console.log("err:",err);
        })
    
        let newPlay = play.filter((_,index)=>idx!=index);
        setPlay(newPlay);
    
      }

    return (
        <div>
            <table>
                <thead>
                    <tr>
                        <th style={{paddingLeft: 20, fontSize: 18, fontFamily: 'SimSun'}}></th>
                        <th style={{paddingLeft: 40, fontSize:18, fontFamily: 'SimSun'}}>娱乐项目</th>
                        <th style={{paddingLeft: 40, fontSize: 18, fontFamily: 'SimSun'}}>说明</th>
                        <th style={{paddingLeft: 40, fontSize: 18, fontFamily: 'SimSun'}}>操作</th>
                    </tr>
                </thead>
                <tbody>
                {
                    play.map((item, index) =>
                    <tr>
                        <td style={{paddingTop: 20,paddingLeft: 20, textAlign: 'center'}}>
                            <img style={{width: 100, height: 100}} src={'https://api.124ss.xyz:2355/images/' + item[1]} />
                        </td>
                        <td style={{paddingTop: 20,paddingLeft: 40, textAlign: 'center',fontSize: 10}}>{item[2]}</td>
                        <td style={{paddingTop: 20,paddingLeft: 40,fontSize: 10,textAlign: 'center'}}>{item[3]}</td>
                        <td style={{paddingTop: 20,paddingLeft: 40}}>
                            <button onClick={() => DelItem(index,item)}>
                                删除
                            </button>
                        </td>
                    </tr>)
                }
                </tbody>
            </table>
        </div>
    )
}

export default Play
